import { defineComponent, onMounted, ref } from 'vue';
import { QualificationAPI, PatentTrendAPI, SeicAPI, IndustryRankAPI } from '@/service/api/OverviewAPI';
import { GetQulificationCustomAPI } from '@service/api/AdminAPI';
import Qualification from './qualification';
import PatentTrend from './PatentTrend';
import DistrictCenters from './DistrictCenters';
import IndustryRank from './IndustryRank';
import './style.scss';

export default defineComponent({
  name: 'Overview',
  setup() {
    const QualificationData = ref([]); // 企业资质接口数据
    const QualificationModalData = ref([]); // 企业资质接口数据
    const PatentTrendData = ref({}); // 专利增长趋势接口数据
    const DistrictCentersData = ref([]); // 企业资质接口数据
    const IndustryRankData: any = ref([]); // 产业排名接口数据

    onMounted(async () => {
      const currentYear = new Date().getFullYear(); // 当前年份
      const filter = {
        region: {
          province: '江苏省',
          city: '苏州市',
          district: null,
        },
      };

      // 获取数据
      [
        QualificationData.value,
        PatentTrendData.value,
        DistrictCentersData.value,
        IndustryRankData.value,
        QualificationModalData.value,
      ] = await Promise.all([
        QualificationAPI({
          filter,
          groupby: ['qualification'],
          aggregate: {
            cnt: 'sum',
          },
        }),
        PatentTrendAPI({
          filter: {
            apdt: {
              start: currentYear - 4 + '-01-01',
              end: currentYear + '-12-31',
            },
          },
        }),
        SeicAPI({
          filter: {
            seic_lv2_code: ['1.2', '1.5', '4.1'], // '人工智能', '生物医药', '第三代半导体'
          },
        }),
        IndustryRankAPI({
          filter,
          groupby: ['seic_lv1'], //分组
          aggregate: {
            //聚合条件
            seic_lv1: 'count',
          },
        }),
        GetQulificationCustomAPI(),
      ]);
    });

    return { QualificationData, PatentTrendData, DistrictCentersData, IndustryRankData, QualificationModalData };
  },
  render() {
    return (
      <div id="Overview">
        <main>
          <aside>
            <PatentTrend data={this.PatentTrendData}></PatentTrend>
            <DistrictCenters data={this.DistrictCentersData}></DistrictCenters>
          </aside>

          <main>
            <Qualification data={this.QualificationData} modalData={this.QualificationModalData}></Qualification>
          </main>

          <aside>
            <IndustryRank data={this.IndustryRankData}></IndustryRank>
          </aside>
        </main>
        <footer></footer>
      </div>
    );
  },
});
